<!DOCTYPE html>
<html style="font-size: 24px;">

<head>
	<title>index</title>
	<link rel="stylesheet" href="./index.css">
	<meta content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover" name="viewport">
</head>

<body>
	<div id="root" style="height: 1000px;">
		<div class="panel">
			<div class="panel__title">滚动标签栏</div>
			<div class="panel__content">
				<div class="at-tabs at-tabs--scroll at-tabs--horizontal at-tabs--WEB" style="">
					<div id="LOHHOLGL" scrollx="true" scrollwithanimation="true"
						class="taro-scroll taro-scroll-view__scroll-x at-tabs__header">
						<div class="tab0 at-tabs__item at-tabs__item--active">标签页1<div class="at-tabs__item-underline">
							</div>
						</div>
						<div class="tab1 at-tabs__item">标签页2<div class="at-tabs__item-underline"></div>
						</div>
						<div class="tab2 at-tabs__item">标签页3<div class="at-tabs__item-underline"></div>
						</div>
						<div class="tab3 at-tabs__item">标签页4<div class="at-tabs__item-underline"></div>
						</div>
						<div class="tab4 at-tabs__item">标签页5<div class="at-tabs__item-underline"></div>
						</div>
						<div class="tab5 at-tabs__item">标签页6<div class="at-tabs__item-underline"></div>
						</div>
					</div>
					<div class="at-tabs__body">
						<div class="at-tabs__underline" style="height: 1px; width: 600%;"></div>
						<div class="at-tabs-pane at-tabs-pane--inactive" style="">
							<div class="tab-content">标签页一的内容</div>
						</div>
						<div class="at-tabs-pane at-tabs-pane--inactive" style="">
							<div class="tab-content">标签页二的内容</div>
						</div>
						<div class="at-tabs-pane at-tabs-pane--inactive" style="">
							<div class="tab-content">标签页三的内容</div>
						</div>
						<div class="at-tabs-pane at-tabs-pane--inactive" style="">
							<div class="tab-content">标签页四的内容</div>
						</div>
						<div class="at-tabs-pane at-tabs-pane--inactive" style="">
							<div class="tab-content">标签页五的内容</div>
						</div>
						<div class="at-tabs-pane at-tabs-pane--inactive" style="">
							<div class="tab-content">标签页六的内容</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="box" style="width: 100px; height: 100px; background-color: #333; margin-top: 990px;"></div>
	</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
	let index = 0;
	let bodyBoard = $(".at-tabs__body");
	let transformStyle = `translate3d(-${index * 100}%, 0px, 0px)`;
	bodyBoard[0].style.transform = transformStyle;

	let pageWidth = document.documentElement.clientWidth || document.body.clientWidth;
	let tabs = document.querySelectorAll(`.at-tabs--scroll .at-tabs__item`);
	let tabTotal = tabs.length;
	let tabIndex = -1;
	let tabItemWidthList = [];
	Array.prototype.slice.call(tabs).forEach((item, index) => {
		tabItemWidthList.push(item.clientWidth)
	});

	$(".at-tabs__item").on("click", function (e) {
		let target = $(e.currentTarget);
		index = target.index();

		transformStyle = `translate3d(-${index * 100}%, 0px, 0px)`;
		bodyBoard[0].style.transform = transformStyle;

		let currentIndex = Math.max(index - 1, 0);
		let inlineDesc = 'start';

		let afterList = tabItemWidthList.slice(currentIndex + 1, tabTotal);
		let beforeList = tabItemWidthList.slice(0, currentIndex + 1);
		let totalWidth=tabItemWidthList.reduce((prev, current) => prev + current);
		let totalAfterWidth = afterList.reduce((prev, current) => prev + current);
		let totalBeforeWidth = beforeList.reduce((prev, current) => prev + current);

		if (totalAfterWidth > pageWidth) {
			inlineDesc = 'start';
		} else if (totalBeforeWidth > pageWidth) {
			let currentWidth = totalAfterWidth + tabItemWidthList[currentIndex];
			if (currentWidth > pageWidth) {
				inlineDesc = 'start';
			} else {
				inlineDesc = 'end';
				currentIndex = tabTotal - 1;
			}
		} else {
			inlineDesc = 'end';
			currentIndex = tabTotal - 1;
			console.log(tabIndex,index,totalBeforeWidth,totalAfterWidth,totalWidth)
			if (tabIndex > index) {
				if(tabItemWidthList[currentIndex]+totalAfterWidth>pageWidth){
					inlineDesc = 'start';
					currentIndex = Math.max(index - 1, 0);
				}
			} else {
				if(tabItemWidthList[currentIndex]+totalAfterWidth>pageWidth){
					inlineDesc = 'start';
					currentIndex = Math.max(index - 1, 0);
				}
			}
		}
		/**
			两个问题 
			1，2，3切换
			6，5，4切换
		*/
		tabIndex = index;

		target.siblings().removeClass('at-tabs__item--active');
		target.addClass("at-tabs__item--active");
		let currentBody = bodyBoard.find('.at-tabs-pane').eq(index);
		currentBody.siblings().removeClass('at-tabs-pane--active').addClass('at-tabs-pane--inactive');
		currentBody.removeClass('at-tabs-pane--inactive').addClass('at-tabs-pane--active');

		console.log(currentIndex,inlineDesc)

		document
			.querySelector(`.at-tabs--scroll .tab${currentIndex}`)
			.scrollIntoView({ block: 'nearest', inline: inlineDesc });
		// document
		// 	.querySelector(`.fixed-tab-list .tab${currentIndex}`)
		// 	.scrollIntoView({ block: 'nearest', inline: inlineDesc });

		//$(".tab" + index)[0].scrollIntoView({ block: "nearest", inline: inlineDesc });
	})
</script>

</html>